import { Options, Vue } from 'vue-class-component';
import { Prop } from 'vue-property-decorator';
import { FilterOutlined } from '@ant-design/icons-vue';
import './toolbar.less';

@Options({
    components: {
        'filter-outlined': FilterOutlined,
    },
})
export class ToolBar extends Vue {
    /**
     * 工具栏模型对象
     *
     * @type {any[]}
     * @memberof ToolBar
     */
    @Prop()
    toolbarModel!: any[];

    /**
     * 工具栏模型对象
     *
     * @type {any[]}
     * @memberof ToolBar
     */
    @Prop()
    isFilter?: boolean;

    /**
     * 搜索表单是否可见
     *
     * @type {boolean}
     * @memberof ToolBar
     */
    searchFormVisible: boolean = false;

    /**
     * 工具栏项单机
     *
     * @param {*} item
     * @memberof ToolBar
     */
    toolbarItemClick(item: any) {
        this.$emit('toolbarItemClick', item);
    }

    /**
     * 过滤按钮单机事件
     *
     * @memberof ToolBar
     */
    filterClick() {
        this.searchFormVisible = !this.searchFormVisible;
        this.$emit('toolbarItemClick', { action: 'searchFormState', data: this.searchFormVisible });
    }

    /**
     * 绘制函数
     *
     * @return {*}
     * @memberof ToolBar
     */
    render() {
        return (
            <div class='toolbar'>
                {this.isFilter ? <a-button onClick={this.filterClick} size='small' type={this.searchFormVisible ? 'primary' : 'default'}>
                    <filter-outlined />
                </a-button> : null}
                {this.toolbarModel?.map((item: any) => {
                    return (
                        <a-button
                            type={item.type}
                            class={['toolbar-item']}
                            size='small'
                            onClick={() => this.toolbarItemClick(item)}
                        >
                            {item.text}
                        </a-button>
                    );
                })}
            </div>
        );
    }
}
